﻿<template>
    <el-input :model-value="modelValue" readonly :disabled="disabled" v-bind="$attrs">
        <template #append v-if="!disabled">
            <el-button @click="onBtnClick">...</el-button>
        </template>
    </el-input>
</template>

<script>

export default {
    name: "MyTreeSelectInput",
    emits: ["update:modelValue"],
    props: {
        modelValue: String,
        valueField: String,
        formData: Object,
        disabled: Boolean,
        dataUrl: String,//取数据的链接
        title: String,//选择框名称
        srcFields:String,
        destFields:String,
        idField:String,
        nameField:String,
    },

    created() {
    },
    methods: {
        onBtnClick() {
            const cfg = {
                title: this.title || "选择数据",
                action: this.dataUrl,
                valueField: this.idField || "value",
                labelField: this.nameField || "label",
            }
            $server.dlg.selectTree(cfg).then(res => {
                let item = res;
                if(this.valueField){
                    this.formData[this.valueField] = res[this.idField || "value"];
                }
                this.$emit("update:modelValue", res[this.nameField || "label"]);
                if(this.srcFields && this.destFields){
                    let src = this.srcFields.split(/[，；,;]/g).filter(x=>x.length>0);
                    let dest = this.destFields.split(/[，；,;]/g).filter(x=>x.length>0);
                    for (let ix = 0; ix < src.length; ix++) {
                        let pkey = dst[ix];
                        this.formData[pkey] = item[src[ix]] ?? null;
                    }
                }
            })
        }
    },
};
</script>